<template>
	<view class="note-import-page">
		<wd-form ref="formRef" :model="form" :rules="rules">
			<view ref="textareaRef">
				<wd-textarea auto-height label="内容" label-width="100px" prop="content" v-model="form.content"
					placeholder="请输入内容" />
			</view>
			<view class="footer">
				<wd-button type="primary" size="large" @click="onSubmit" block>提交</wd-button>
			</view>
		</wd-form>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { Note } from '@/types/note'
	import { FormRules } from '@/uni_modules/wot-design-uni/components/wd-form/types'
	import { useNoteStore } from '@/stores/note';
	import { onLoad } from '@dcloudio/uni-app'

	const note = useNoteStore()//缓存
	//表单相关
	const formRef = ref()
	const form = ref<{ content : string }>({
		content: '',
	})
	const rules = ref<FormRules>({
		content: [{ required: true, message: '请输入内容' }],
	})

	/** 保存 */
	async function onSubmit() {
		// 验证表单
		const { valid } = await formRef.value.validate()
		if (!valid) return
		try {
			const data = JSON.parse(form.value.content)
			note.importNotes(data, false)
			uni.showToast({ title: '导入成功', icon: 'success' })
			setTimeout(() => {
				uni.navigateBack()
			}, 800)
		} catch (e) {
			uni.showToast({
				icon: 'none',
				title: '数据格式异常（要求：json字符串）'
			})
		}

		// 返回上一级或清空表单
		setTimeout(() => {
			uni.navigateBack()
		}, 800)
	}
</script>

<style lang="scss" scoped>
	.note-import-page {

		.footer {
			padding: 20rpx;
		}
	}
</style>